<template>
    <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="value" name="password" placeholder="至少6位，包含：数字，大写字母，小写字母，特殊符号" type="password"
                :rules="[{ validator }]" label="密码" />
        </van-cell-group>
        <div style="margin: 40px;">
            <van-button :disabled="!validator(value)" round block type="primary" native-type="submit">完成</van-button>
        </div>
    </van-form>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
// 引入创建路由对象以及当前路由对象的方法
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
// 引入注册完成接口
import { finishregister } from '@/api/registapi'
// 引入函数形式的组件
import { Dialog } from 'vant';
const value = ref<string>('')    // 输入的密码
let validator = (val: string) => /^.*(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?])\w{6,}/.test(val);
// 创建当前路由对象以及路由对象
let route = useRoute()
let router = useRouter()
let tel: any = route.query.tel  // 注册页面2跳转时传递过来的输入的手机号
// 点击完成按钮
let onSubmit = (values: { tel: string, password: string }) => {
    // console.log(values);
    // console.log(tel);
    // console.log({tel:tel,password:values.password});
    // 调用注册完成接口
    finishregister({ tel: tel, password: values.password }).then((res: any) => {
        // console.log('注册完成接口', res);
        Dialog.confirm({
            message: `注册成功，立即去登录`
        }).then(() => {
            // 跳转到登录页
            router.push('/login')
        })

    })
}

</script>
<style scoped>
.van-form {
    margin: 40px 0;
}
</style>
